{extend name="public/base"/}
{block name="style"}
<style type="text/css">
    .layui-card {
        padding: 20px;
    }
    .widget {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 36px;
    }
    .widget_item {
        margin-left: 20px;
    }
    .widget_item > h3 {
        font-size: 25px;
    }
    .widget_item > div {
        font-weight: 700;
    }
    .title {
        color: rgba(173, 36, 36, 1);
        font-size: 20px;
        font-weight: 700;
        font-family: Arial;
        font-style: normal;
    }
</style>
{/block}
{block name="body"}
    {if !empty($tips)}
        <div>
            <h1 class="text-red text-center">
                <span>{$tips}</span>
                <a class="layui-btn layui-btn-normal layui-btn-sm" target="_blank" href="http://www.lmterp.cn/auth.html">申请授权</a>
            </h1>
        </div>
    {/if}
    <div class="space-box">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md3">
                <div class="layui-card">
                    <div class="layui-card-body widget">
                        <i class="layui-icon layui-icon-rmb" style="font-size: 60px"></i>
                        <div class="widget_item">
                            <h3>本月订单总额</h3><br>
                            <div>{$monthTotal.price?:0}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md3">
                <div class="layui-card">
                    <div class="layui-card-body widget">
                        <i class="layui-icon layui-icon-cart" style="font-size: 60px"></i>
                        <div class="widget_item">
                            <h3>本月订单数</h3><br>
                            <div>{$monthTotal.order?:0}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md3">
                <div class="layui-card">
                    <div class="layui-card-body widget">
                        <i class="layui-icon layui-icon-tips" style="font-size: 60px"></i>
                        <div class="widget_item">
                            <h3>异常订单数</h3><br>
                            <div>{$exOrder?:0}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md3">
                <div class="layui-card">
                    <div class="layui-card-body widget">
                        <i class="layui-icon layui-icon-log" style="font-size: 60px"></i>
                        <div class="widget_item">
                            <h3>超时未处理订单数</h3><br>
                            <div>{$outTime?:0}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-body">
                        <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
                        <div id="orders" style="width: auto;height:400px;"></div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header" style="border: none;"><i class="title">订单</i></div>
                    <div class="layui-card-body">
                        <table class="layui-table text-center" lay-size="sm">
                            <thead>
                            <tr>
                                <th>日期</th>
                                <th>订单总数</th>
                                <th>销售总额</th>
                            </tr>
                            </thead>
                            <tbody>
                            {foreach $table_ymd as $item}
                            <tr>
                                <td>{$item.s?:0}</td>
                                <td>{$item.order?:0}</td>
                                <td>{$item.price?:0}</td>
                            </tr>
                            {/foreach}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
{/block}
{block name="script"}
<script src="__PUBLIC__/js/echarts.min.js"></script>
<script src="__PUBLIC__/js/MyChart.js"></script>
<script type="text/javascript">
MyChart.bar($("#orders"), {
    title: '订单数图表',
    data: {
        xAxis: [{php}echo join(',', array_keys($graph_30_day));{/php}],
        series: [{
            name: '订单数',
            data: [{php}echo join(',', $graph_30_day);{/php}],
        }],
    }
});
</script>
{/block}